<template>
    <div class="response">
        <el-divider><i class="el-icon-chat-dot-square"></i> {{total}}条评论</el-divider>
    </div>
    <div class="comment-data" v-if="comments.comment.length">
        <ol class="comment-list">
            <!--循环li-->
            <li v-for="item in comments.comment" :key="item.coid" class="comment-body comment-parent comment-even">
                <el-avatar class="comment-avatar" shape="square" :src="item.url"></el-avatar>
                <div class="comment-content">
                    <div class="comment-text">
                        <span class="comment-reply" style="float:right"><i class="el-icon-chat-dot-round"></i></span>
<!--                        <el-card class="comment-content">-->
                        <p>{{item.text}}</p>
<!--                        </el-card>-->
                    </div>
                    <div class="comment-meta">
                        By <span>{{item.author}}</span>  at {{item.created}}
                    </div>
                </div>
            </li>
        </ol>
        <el-pagination class="blog-page"
                       background
                       layout="prev, pager, next"
                       :current-page="current"
                       :page-size="PageSize"
                       :total="total"
                       @current-change=getArticle
                       hide-on-single-page="true">
        </el-pagination>
    </div>

</template>

<script>
    import {getComments} from "@/api/comment" ;
    import { ElMessage } from 'element-plus'
    import {ref,reactive,watch,computed} from 'vue';
    import {addComment} from '@/api/comment'
    import { useStore } from "vuex";
    export default {
        name: "index",
        setup(){
            const store = useStore();
            const current =ref(0);
            const total =ref(0);
            const PageSize=ref(0);
            const comments=reactive({comment:[]})
            const  aid =computed(()=> store.state.blogdetail.aid);
            getComments(aid.value,1).then(res=>{
                comments.comment = res.data.data.records;
                total.value = res.data.data.total;
                PageSize.value =res.data.data.size;
                console.log(res);
            });

            return{total,PageSize,comments}
        }

    }
</script>

<style lang="scss" scoped>
    @import "src/styles/main";
    .comment-meta span:first-child {
        background-color: #dfdddd;
        display: inline-block;
        padding: 3px 8px;
        border-radius: 5px;
    }
    .blog-page{
        margin: 0 auto;
        text-align: center;
    }
    /deep/ .el-divider{

        .el-divider__text{ font-size: 25px; background-color: #f2f2f2;}

    }
    .response{

        /*padding: 30px 0;*/
        /*display: block;*/
        /*border-top: 1px solid #8e8d8d;*/
        /*position: relative;*/

    }
</style>